--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Node / ReticulumProjects / MeshChatX.git / files / meshchatx / src / frontend / components / stickers / StickerView.vue
Displaying Raw • Download
meshchatx/src/frontend/components/stickers/StickerView.vue e5756d7ab065475a18acdcafc008a767fcff87e0 (e5756d7a) Text, 3.67 KB
Tb4b4b4<Tff7b72templateTb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3refTff7b72=Ta5d6ff"stickerRoot" Tb4b4b4:Te6edf3classTff7b72=Ta5d6ff"Tb4b4b4[Ta5d6ff'sticker-view'Tb4b4b4, Te6edf3sizeClassTb4b4b4]Ta5d6ff"Tb4b4b4>
Tb4b4b4<Tff7b72video Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3isVideoTa5d6ff" Te6edf3refTff7b72=Ta5d6ff"videoEl" Tb4b4b4:Te6edf3srcTff7b72=Ta5d6ff"Te6edf3srcTa5d6ff" Te6edf3classTff7b72=Ta5d6ff"sticker-media" Te6edf3loop Te6edf3muted Te6edf3playsinline Tb4b4b4@Te6edf3errorTff7b72=Ta5d6ff"Te6edf3onErrorTa5d6ff" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3v-else-ifTff7b72=Ta5d6ff"Te6edf3isAnimatedTa5d6ff"
Te6edf3classTff7b72=Ta5d6ff"w-full h-full flex items-center justify-center bg-gray-200/80 dark:bg-zinc-700/50 text-gray-500 dark:text-zinc-400"
Tb4b4b4:Te6edf3titleTff7b72=Ta5d6ff"Te6edf3alt Tff7b72|| Ta5d6ff'TGS'Ta5d6ff"
Tb4b4b4:Te6edf3aria-labelTff7b72=Ta5d6ff"Te6edf3alt Tff7b72|| Ta5d6ff'Animated sticker'Ta5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"animation-outline" Te6edf3classTff7b72=Ta5d6ff"w-[42%] h-[42%] opacity-70" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72img
Te6edf3v-else
Tb4b4b4:Te6edf3srcTff7b72=Ta5d6ff"Te6edf3srcTa5d6ff"
Te6edf3classTff7b72=Ta5d6ff"sticker-media"
Te6edf3decodingTff7b72=Ta5d6ff"async"
Te6edf3loadingTff7b72=Ta5d6ff"lazy"
Tb4b4b4:Te6edf3altTff7b72=Ta5d6ff"Te6edf3alt Tff7b72|| Ta5d6ff''Ta5d6ff"
Tb4b4b4@Te6edf3errorTff7b72=Ta5d6ff"Te6edf3onErrorTa5d6ff"
Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72templateTb4b4b4>
Tb4b4b4<Tff7b72scriptTb4b4b4>
Tff7b72import Tb4b4b4{ Te6edf3attachInView Tb4b4b4} Tff7b72from Ta5d6ff"../../js/inViewObserver.js"Tb4b4b4;
Tff7b72import Te6edf3MaterialDesignIcon Tff7b72from Ta5d6ff"../MaterialDesignIcon.vue"Tb4b4b4;
Tff7b72export Tff7b72default Tb4b4b4{
Te6edf3nameTff7b72: Ta5d6ff"StickerView"Tb4b4b4,
Te6edf3componentsTff7b72: Tb4b4b4{ Te6edf3MaterialDesignIcon Tb4b4b4}Tb4b4b4,
Te6edf3propsTff7b72: Tb4b4b4{
Te6edf3srcTff7b72: Tb4b4b4{ Te6edf3typeTff7b72: Tffa657StringTb4b4b4, Te6edf3requiredTff7b72: Tff7b72true Tb4b4b4}Tb4b4b4,
Te6edf3imageTypeTff7b72: Tb4b4b4{ Te6edf3typeTff7b72: Tffa657StringTb4b4b4, Tff7b72defaultTff7b72: Ta5d6ff"" Tb4b4b4}Tb4b4b4,
Te6edf3altTff7b72: Tb4b4b4{ Te6edf3typeTff7b72: Tffa657StringTb4b4b4, Tff7b72defaultTff7b72: Ta5d6ff"" Tb4b4b4}Tb4b4b4,
Te6edf3sizeTff7b72: Tb4b4b4{ Te6edf3typeTff7b72: Tffa657StringTb4b4b4, Tff7b72defaultTff7b72: Ta5d6ff"auto" Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Te6edf3emitsTff7b72: Tb4b4b4[Ta5d6ff"error"Tb4b4b4]Tb4b4b4,
Te6edf3dataTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72return Tb4b4b4{
Te6edf3destroyedTff7b72: Tff7b72falseTb4b4b4,
Te6edf3inViewTff7b72: Tff7b72falseTb4b4b4,
Te6edf3ioCleanupTff7b72: Tff7b72nullTb4b4b4,
Tb4b4b4}Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3computedTff7b72: Tb4b4b4{
Te6edf3isVideoTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72return Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3imageType Tff7b72|| Ta5d6ff""Tb4b4b4)Tb4b4b4.Te6edf3toLowerCaseTb4b4b4(Tb4b4b4) Tff7b72=== Ta5d6ff"webm"Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3isAnimatedTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72return Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3imageType Tff7b72|| Ta5d6ff""Tb4b4b4)Tb4b4b4.Te6edf3toLowerCaseTb4b4b4(Tb4b4b4) Tff7b72=== Ta5d6ff"tgs"Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3sizeClassTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72return Ta5d6ff`Ta5d6ffsticker-view--Tffd700${Tff7b72thisTb4b4b4.Te6edf3sizeTffd700}Ta5d6ff`Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Te6edf3watchTff7b72: Tb4b4b4{
Te6edf3inViewTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3onInViewChangedTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3srcTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3isVideoTb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3$nextTickTb4b4b4(Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tff7b72thisTb4b4b4.Te6edf3syncVideoPlaybackTb4b4b4(Tb4b4b4)Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Te6edf3imageTypeTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3isVideoTb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3$nextTickTb4b4b4(Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tff7b72thisTb4b4b4.Te6edf3syncVideoPlaybackTb4b4b4(Tb4b4b4)Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Te6edf3mountedTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3$nextTickTb4b4b4(Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tff7b72thisTb4b4b4.Te6edf3setupInViewTb4b4b4(Tb4b4b4)Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3beforeUnmountTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3destroyed Tff7b72= Tff7b72trueTb4b4b4;
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3ioCleanupTb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3ioCleanupTb4b4b4(Tb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3ioCleanup Tff7b72= Tff7b72nullTb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Te6edf3methodsTff7b72: Tb4b4b4{
Te6edf3setupInViewTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72const Te6edf3el Tff7b72= Tff7b72thisTb4b4b4.Te6edf3$refsTb4b4b4.Te6edf3stickerRootTb4b4b4;
Tff7b72if Tb4b4b4(Tff7b72!Te6edf3elTb4b4b4) Tb4b4b4{
Tff7b72returnTb4b4b4;
Tb4b4b4}
Tff7b72thisTb4b4b4.Te6edf3ioCleanup Tff7b72= Te6edf3attachInViewTb4b4b4(Te6edf3elTb4b4b4, Tb4b4b4(Te6edf3entryTb4b4b4) Tb4b4b4=> Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3inView Tff7b72= Te6edf3entryTb4b4b4.Te6edf3isIntersectingTb4b4b4;
Tb4b4b4}Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3onInViewChangedTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3isVideoTb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3syncVideoPlaybackTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Te6edf3syncVideoPlaybackTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72const Te6edf3v Tff7b72= Tff7b72thisTb4b4b4.Te6edf3$refsTb4b4b4.Te6edf3videoElTb4b4b4;
Tff7b72if Tb4b4b4(Tff7b72!Te6edf3v Tff7b72|| Tff7b72!Tff7b72thisTb4b4b4.Te6edf3isVideoTb4b4b4) Tb4b4b4{
Tff7b72returnTb4b4b4;
Tb4b4b4}
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3inViewTb4b4b4) Tb4b4b4{
Te6edf3vTb4b4b4.Te6edf3playTff7b72?Tb4b4b4.Tb4b4b4(Tb4b4b4)Tb4b4b4.Tff7b72catchTb4b4b4(Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4{Tb4b4b4}Tb4b4b4)Tb4b4b4;
Tb4b4b4} Tff7b72else Tb4b4b4{
Te6edf3vTb4b4b4.Te6edf3pauseTff7b72?Tb4b4b4.Tb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Te6edf3onErrorTb4b4b4(Te6edf3eTb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3$emitTb4b4b4(Ta5d6ff"error"Tb4b4b4, Te6edf3eTb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4;
Tb4b4b4<Tb4b4b4/Tff7b72scriptTb4b4b4>
Tb4b4b4<Tff7b72style Te6edf3scopedTb4b4b4>
Tb4b4b4.T56d364sticker-view Tb4b4b4{
Tff7b72displayTb4b4b4: Tff7b72inline-flexTb4b4b4;
Tff7b72align-itemsTb4b4b4: Tff7b72centerTb4b4b4;
Tff7b72justify-contentTb4b4b4: Tff7b72centerTb4b4b4;
Tff7b72overflowTb4b4b4: Tff7b72hiddenTb4b4b4;
Tff7b72line-heightTb4b4b4: T79c0ff0Tb4b4b4;
Tb4b4b4}
Tb4b4b4.T56d364sticker-view--auto Tb4b4b4{
Tff7b72widthTb4b4b4: T79c0ff100Tffa657%Tb4b4b4;
Tff7b72heightTb4b4b4: T79c0ff100Tffa657%Tb4b4b4;
Tb4b4b4}
Tb4b4b4.T56d364sticker-view--xs Tb4b4b4{
Tff7b72widthTb4b4b4: T79c0ff32Tffa657pxTb4b4b4;
Tff7b72heightTb4b4b4: T79c0ff32Tffa657pxTb4b4b4;
Tb4b4b4}
Tb4b4b4.T56d364sticker-view--sm Tb4b4b4{
Tff7b72widthTb4b4b4: T79c0ff56Tffa657pxTb4b4b4;
Tff7b72heightTb4b4b4: T79c0ff56Tffa657pxTb4b4b4;
Tb4b4b4}
Tb4b4b4.T56d364sticker-view--md Tb4b4b4{
Tff7b72widthTb4b4b4: T79c0ff96Tffa657pxTb4b4b4;
Tff7b72heightTb4b4b4: T79c0ff96Tffa657pxTb4b4b4;
Tb4b4b4}
Tb4b4b4.T56d364sticker-view--lg Tb4b4b4{
Tff7b72widthTb4b4b4: T79c0ff192Tffa657pxTb4b4b4;
Tff7b72heightTb4b4b4: T79c0ff192Tffa657pxTb4b4b4;
Tb4b4b4}
Tb4b4b4.T56d364sticker-media Tb4b4b4{
Tff7b72widthTb4b4b4: T79c0ff100Tffa657%Tb4b4b4;
Tff7b72heightTb4b4b4: T79c0ff100Tffa657%Tb4b4b4;
Tff7b72object-fitTb4b4b4: Tff7b72containTb4b4b4;
Tff7b72displayTb4b4b4: Tff7b72blockTb4b4b4;
Tb4b4b4}
Tb4b4b4<Tb4b4b4/Tff7b72styleTb4b4b4>
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────